import React, { useState } from 'react';
import { Form, Input, Modal, Radio, Select, DatePicker, TreeSelect } from 'antd';
import { validUserName } from '@/services/user';
import { validatorMobile } from '@/utils/utils';


export interface CreateFormProps {
  modalVisible: boolean;
  onSubmit: (values: API.UserItem) => void;
  onCancel: () => void;
  rolelist: API.RoleItem[];
  departmentlist: API.TreeNodeItem[];
}

const formLayout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 15 },
};

const { Option } = Select;
const FormItem = Form.Item;

const CreateForm: React.FC<CreateFormProps> = (props) => {
  const [formVals] = useState<API.UserItem>({
    roleId: 1,
    departmentId: 0,
    userName: '',
    realName: '',
    password: '',
    sex: 1,
    post: '',
    title: '',
    headImg: '',
    phoneNumber: '',
    entryTime: '',
    disable: 0,
  });

  const [form] = Form.useForm();

  const { modalVisible, onSubmit: handleAdd, onCancel, rolelist, departmentlist } = props;
  const okHandle = async () => {
    const fieldsValue = await form.validateFields();
    form.resetFields();
    handleAdd(fieldsValue);
  };

  const validatorUserName = async (_: any, value: string) => {
    const json = await validUserName({ userName: value });
    const promise = Promise;
    if (json && json.msg) {
      return promise.reject(json.msg);
    }
    return promise.resolve();
  };


  const getOption = (list: API.RoleItem[]) => {
    if (!list || list.length < 1) {
      return (
        <Option key={''} value={''}>
          请先到部门管理页面添加部门
        </Option>
      );
    }
    return list.map((item) => (
      <Option key={item.roleId+''} value={item.roleId+'' ?? ''}>
        {item.roleName}
      </Option>
    ))
  }

  return (
    <Modal
      width={640}
      destroyOnClose
      title="新增用户"
      visible={modalVisible}
      onOk={okHandle}
      onCancel={() => onCancel()}
    >
      <Form
        {...formLayout}
        form={form}
        initialValues={{
          disable: formVals.disable,
          entryTime: formVals.entryTime,
          phoneNumber: formVals.phoneNumber,
          post: formVals.post,
          title: formVals.title,
          sex: formVals.sex,
          password: formVals.password,
          realName: formVals.realName,
          userName: formVals.userName,
          departmentId: formVals.departmentId+'',
          roleId: formVals.roleId+'',
        }}
      >
        <FormItem
          label="用户名"
          name="userName"
          rules={[{ required: true, message: '请输入至少二个字符！', min: 2 }, { validator: validatorUserName }]}
        >
          <Input placeholder="请输入" autoComplete='off' />
        </FormItem>
        <FormItem
          label="姓名"
          name="realName"
          rules={[{ required: true, message: '请输入至少二个字符！', min: 2 }]}
        >
          <Input placeholder="请输入" autoComplete='off' />
        </FormItem>
        <FormItem
          label="性别"
          name="sex"
        >
          <Radio.Group>
            <Radio value={1} >
              男
            </Radio>
            <Radio value={0}>
              女
            </Radio>
          </Radio.Group>
        </FormItem>
        <FormItem
          label="角色"
          name="roleId"
          rules={[{ required: true, message: '请选择角色' }]}
        >
          <Select placeholder="请选择">
            {getOption(rolelist)}
          </Select>
        </FormItem>
        <FormItem
          label="部门"
          name="departmentId"
          rules={[{ required: true, message: '请选择部门' }]}
        >
          <TreeSelect
            style={{ width: '100%' }}
            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
            treeData={departmentlist}
            placeholder="请选择部门"
            treeDefaultExpandAll
          />
        </FormItem>
        <FormItem
          label="职务"
          name="post"
          rules={[{ min:2,max:16}]}
        >
          <Input placeholder="请输入" />
        </FormItem>
        <FormItem
          label="职称"
          name="title"
          rules={[{ min:2,max:16}]}
        >
          <Input placeholder="请输入" />
        </FormItem>
        <FormItem
          label="联系电话"
          name="phoneNumber"
          rules={[{ validator: validatorMobile }]}
        >
          <Input placeholder="请输入" />
        </FormItem>
        <FormItem
          label="入职时间"
          name="entryTime"
        >
          <DatePicker placeholder='请选择' style={{ width: '100%' }} />
        </FormItem>
        <FormItem
          label="启用状态"
          name="disable"
        >
          <Radio.Group>
            <Radio value={0} >
              启用
            </Radio>
            <Radio value={1}>
              禁用
            </Radio>
          </Radio.Group>
        </FormItem>
      </Form>
    </Modal>
  );
};

export default CreateForm;
